<template>
    <div class="header">
        <div class="l-content">
            <el-button size="samll" @click="handleCollapse">
                <component class="icons" is="menu"></component>
            </el-button>

            <!-- <el-breadcrumb separator="/" class="bread">
                <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item v-if="current" :to="current.path">{{ current.label }}</el-breadcrumb-item>
            </el-breadcrumb> -->
        </div>
        <div class="r-content">
            <el-dropdown>
                <span class="el-dropdown-link">
                    <!-- <img :src="getImageUrl('user')" class="avatar"> -->
                    <img :src="avatarSrc" class="avatar">
                </span>
                <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item @click="handleProfileClick">个人中心</el-dropdown-item>
                    <el-dropdown-item @click="handleLogout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
    </div>
</template>

<script setup>
import {  useRouter } from 'vue-router';
import { useAllDataStore } from '@/stores'
import { computed } from 'vue';
import avatarSrc from '../assets/images/avatar.png'


const store = useAllDataStore()

const getImageUrl = (user)=> {
    if (store.state.avatar) {
        // 如果是完整的URL（包含http或https），直接返回
        if (store.state.avatar.startsWith('http://') || store.state.avatar.startsWith('https://')) {
            return store.state.avatar
        }
        // 如果是七牛云的链接，添加协议头
        if (store.state.avatar.startsWith('swm2hwy82.hb-bkt.clouddn.com')) {
            return 'http://' + store.state.avatar
        }
        // 如果是相对路径，添加基础URL
        return import.meta.env.VITE_API_URL + store.state.avatar
    }
    return new URL('../assets/images/' + user + '.jpg', import.meta.url).href
}

const handleCollapse = () => {
store.state.isCollapse = !store.state.isCollapse
}

const router = useRouter()
const handleLogout = () => {
    store.clean()
    router.push('/login')
}
const current = computed(() => {
    return store.state.currentMenu
})

const userTag = {
    name: 'userUser',
    path: '/user/user',
    label: '个人界面',
    icon: 'home',
}

const adminTag = {
    name: 'adminUser',
    path: '/admin/user',
    label: '个人界面',
    icon: 'home',
}

const handleProfileClick = () => {
  if (store.state.role === 1) {
    router.push('/admin/user') // role 为 1 跳转到 admin/user
    //添加tag
    store.selectMenu(adminTag)
  } else if (store.state.role === 0) {
    router.push('/user/user') // role 为 0 跳转到 user/user
    store.selectMenu(userTag)
  }
}

</script>

<style scoped>
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 100%;
    background-color: #323232;
}
.icons{
    width:20px;
    height: 20px;
}
.l-content {
    display: flex;
    align-items: center;
    .el-button {
        margin-right: 20px;
    }
}
.r-content {
    .avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        object-fit: cover;
        border: 2px solid #fff;
        transition: all 0.3s ease;
    }
    
    .el-dropdown-link {
        cursor: pointer;
        display: flex;
        align-items: center;
        
        &:hover .avatar {
            transform: scale(1.1);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        }
    }
}
:deep(.bread span){
    color: #fff !important; 
    cursor: pointer !important;
}

</style>